window.onload = function(){
	var slider = document.getElementById('slider');
	var slider_main = document.getElementById('slider_main');
	var allBox = slider_main.children;
	var next = document.getElementById('next');
	var prev = document.getElementById('prev');
	var slider_index = document.getElementById('slider_index');
	var imgs = document.getElementsByTagName('img');
	var now = 0;
	var timer = null;

	// 1、 通过js动态添加索引
	for(var i = 0; i < imgs.length;i++){
		var index = document.createElement('span')
		if(i === 0){
			index.className = 'index_now'
		}else{
			index.className = 'index_common'
		}
		index.innerHTML = i + 1;
		slider_index.appendChild(index)
	}
	// 2、滚动元素归位，统一归位到右边
	var scroll_w = parseInt(getStyle(slider,'width'));
	for(var j = 1;j<allBox.length;j++){
		allBox[j].style.left = scroll_w + 'px';
	}
	// 3、监听下一张按钮的事件
	next.onclick = function(){
		// 控制当前图片左移
		trans(allBox[now],{"left": -scroll_w});
		now++;
		if(now >= allBox.length){
			now = 0;
		}
		allBox[now].style.left = scroll_w + 'px'
		trans(allBox[now],{"left": 0});
		changeIndex()
	}
	// 3.2、监听上一张
	prev.onclick = function(){
		// 控制当前图片右移
		trans(allBox[now],{"left": scroll_w});
		now--;
		if(now <= 0){
			now = allBox.length - 1;
		}
		allBox[now].style.left = -scroll_w + 'px'
		trans(allBox[now],{"left": 0});
		changeIndex()
	}
	
	var index_common = slider_index.children;
	// 4、监听索引器事件
	for(var l = 0;l<index_common.length;l++){
		index_common[l].onclick = function(){
			var click_index = parseInt(this.innerText) - 1;
			if(click_index > now){
				trans(allBox[now],{
					"left": -scroll_w
				})
				allBox[click_index].style.left = scroll_w + 'px';
				trans(allBox[click_index],{
					"left": 0
				})
				now = click_index
				changeIndex()
			}else if(click_index < now){
				trans(allBox[now],{
					"left": scroll_w
				})
				allBox[click_index].style.left = -scroll_w + 'px';
				trans(allBox[click_index],{
					"left": 0
				})
				now = click_index
				changeIndex()
			}
		}
	}
	
	slider.onmouseover = function(){
		clearInterval(timer)
	}
	slider.onmouseout = function(){
		timer = setInterval(function(){
			trans(allBox[now],{"left": -scroll_w});
			now++;
			if(now >= allBox.length){
				now = 0;
			}
			allBox[now].style.left = scroll_w + 'px'
			trans(allBox[now],{"left": 0});
			changeIndex()
		},3000)
	}
	timer = setInterval(function(){
		trans(allBox[now],{"left": -scroll_w});
		now++;
		if(now >= allBox.length){
			now = 0;
		}
		allBox[now].style.left = scroll_w + 'px'
		trans(allBox[now],{"left": 0});
		changeIndex()
	},3000)
	function changeIndex(){
		for(var k = 0;k<slider_index.children.length;k++){
			slider_index.children[k].className = 'index_common'
		}
		slider_index.children[now].className = 'index_now';
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}